<template>
    <a-modal :bodyStyle="{ padding: 0, height: '600px', overflow: 'auto' }" centered :footer="null" v-model:visible="visible" :width="950">
        <template #title>
            <flexbox>
                <span>{{ detailData.title }}</span>
            </flexbox>
        </template>
        <div class="page-wrap page-wrap-ql">
            <div class="page-cont">
                <template v-for="(item, index) of showComs" :key="index">
                    <a-divider style="margin: 0" v-if="index !== 0" />
                    <component :is="item.comName" :detail="detailData" disabled />
                </template>
            </div>
        </div>
    </a-modal>
</template>

<script lang="ts">
import BaseInfo from '@/views/requireChange/changeDetail/components/BaseInfo.vue';
import ChangeInfluence from '@/views/requireChange/changeDetail/components/ChangeInfluence.vue';
import ChangePlan from '@/views/requireChange/changeDetail/components/ChangePlan/index.vue';
import AuditOpinion from '@/views/requireChange/changeDetail/components/AuditOpinion.vue';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    name: 'HistoryDetail',
    components: {
        BaseInfo,
        ChangeInfluence,
        ChangePlan,
        AuditOpinion
    },
    setup() {
        const allComps = [
            {
                comName: 'BaseInfo',
                permissions: ['1', '2']
            },
            {
                comName: 'ChangePlan',
                permissions: ['1', '2']
            },
            {
                comName: 'AuditOpinion',
                permissions: ['2', '3', '4']
            }
        ];
        const state = reactive<any>({
            showComs: [],
            detailData: {},
            visible: false
        });
        const open = (detailData) => {
            state.visible = true;
            state.detailData = detailData;
            matchCom(state.detailData.status);
        };
        // 匹配可显示的模块
        const matchCom = (status: string) => {
            state.showComs = allComps.filter((item) => !item.permissions || item.permissions.includes(status));
        };
        return {
            ...toRefs(state),
            open
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    position: relative;
    height: 100%;
    .page-cont {
        min-height: 516px;
        position: relative;
        background: #fff;
    }
}
</style>